import React from 'react';
import './approveList.less';
import { Breadcrumb, Icon, Button, Table, Modal, Input, Select, Pagination, message ,Row,Col,DatePicker,Form,Checkbox,AutoComplete,InputNumber,Upload } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import convertCurrency from '../commonFunction/convertCurrency';
import getFormatDate from '../commonFunction/getFormatData';
import moment from 'moment';
const { TextArea } = Input;
const config = new Config();
const FormItem = Form.Item;
const Option = Select.Option;


export default class BeforeApproveList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,//模态框
            applyList: [],//申请列表
            record:{},//单条列表
            applycount: 0,//申请列表条数
            pageindex:1,//当前页码
            ModalAllDataUpdates:[{},{}],//模态框展示数据
        }
    }
    componentWillMount(){
        this.getBannerList(1);
        let time=moment().format('YYYY-MM-DD HH:mm:ss');
        console.log(time);
    }
    componentDidMount() {

    }

    //banner详细信息对话框（新增/编辑）
    showBannerModal(record) {
        if(record) {

            this.setState({
                record,
                visible: true,
            },()=>{
                const{record}=this.state;
                this.getApplyShowingData1(record.product,record.umbrellaname,record.requesttime.slice(0,10));
            });
        }
    }

    //通过或驳回发送请求   // 1 申请中、2 已通过、3 已拨款、4 已驳回
    doSendRequest(state,msg){
        console.log(state);
        console.log(msg);
        $.ajax({
            url: `${config.juseLittleTool}/payrequest/update`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data:{
                //user:sessionStorage.getItem('token'),
                id:this.state.record.id,
                state:state
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    message.info(msg,2);
                    this.getBannerList(1);
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //通过
    handlePayApplyPass(){
        //state 2:通过
        this.setState({
            visible: false,
        });


        this.doSendRequest(2,'通过成功!');
    }
    //驳回
    handlePayApplyFaied(){
        //state 2:通过   4 :驳回
        this.setState({
            visible: false,
        });
        this.doSendRequest(4,'驳回成功!');

    }
    //获取申请列表
    getBannerList(pageindex) {
        $.ajax({
            url: `${config.juseLittleTool}/payrequest/findlist`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data:{
                //user:sessionStorage.getItem('token'),
                pageindex,
                state:1,
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    const applyList = data.data.rows;
                    if (applyList.length > 0) {
                        applyList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                        this.setState({
                            applyList,
                            applycount:data.data.count
                        });
                    }else{
                        this.setState({
                            applyList:[],
                        });
                    }
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //分页
    changePage(pageindex) {
        this.setState({
            pageindex
        });
        this.getBannerList(pageindex,);
    }
    //获取申请展示数据
    getApplyShowingData1(product, umbrellaname, time,){
        $.ajax({
            url: `${config.juseLittleTool}/payrequest/findhistory`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data:{
                //user:sessionStorage.getItem('token'),
                product,//产品
                umbrellaname,//平台，渠道商
                requesttime:time,
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    this.setState({
                        ModalAllDataUpdates:data.data
                    },)
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    render() {
        const columns = [
            {
                title: '申请时间',
                dataIndex: 'requesttime',
                width:150,
            },
            {
                title: '产品',
                dataIndex: 'product',
                width: 100,
            }, {
                title: '平台',
                dataIndex: 'umbrellaname',
                width: 100,
            }, {
                title: '账户名',
                dataIndex: 'channelname',
                width: 100
            }, {
                title: '申请人',
                dataIndex: 'requestpeople',
                width: 100
            }, {
                title: '操作',
                width: 100,
                render: (text, record) => (
                    <div>
                        <Button  type="primary" onClick={() => this.showBannerModal(record)}>操作</Button>
                    </div>
                )
            }
        ];
        const{record,ModalAllDataUpdates}=this.state;
        return (
            <div className='goods-label clearfix'>
                {/*面包屑*/}
                < Breadcrumb separator=">" >
                    <Breadcrumb.Item>橘色小工具</Breadcrumb.Item>
                    <Breadcrumb.Item>待审中心</Breadcrumb.Item>
                    <Breadcrumb.Item>费用待审</Breadcrumb.Item>
                </Breadcrumb >
                <div className='allgoods-table clearfix' style={{marginTop:'40px'}}>
                    <Table
                        rowKey="index"
                        className="floor-table"
                        columns={columns}
                        dataSource={this.state.applyList}
                        pagination={false}
                        bordered
                    />
                </div>
                <div className='goods-label-let'>
                    <div className="floor-ppagi">
                        {
                            this.state.applycount == 0?
                                <p className="floor-ppagip">
                                    共{this.state.applycount}条记录
                                </p> :
                                <p className="floor-ppagip">
                                    当前显示
                                    {15*(this.state.pageindex-1)+1}—
                                    {15*this.state.pageindex < this.state.applycount ? 15*this.state.pageindex : this.state.applycount}条记录，
                                    共{this.state.applycount}条记录
                                </p>
                        }
                        <Pagination showQuickJumper current={this.state.pageindex} total={this.state.applycount || 1} defaultPageSize={15} onChange={this.changePage.bind(this)} />
                    </div>
                </div>
                <Modal
                    className="little-tool-modal-middle"
                    title="付款申请单"
                    visible={this.state.visible}
                    footer={null}
                    onCancel={()=>{this.setState({visible:false})}}
                    maskClosable={false}
                >
                    <Row>
                        <Col span={7} offset={1}>
                            产品：{record.product}
                        </Col>
                        <Col span={7} offset={1}>
                            平台：{record.umbrellaname}
                        </Col>
                        <Col span={7} offset={1}>
                            账户名:{record.channelname}
                        </Col>
                    </Row>
                    <h3 className="my-apply-title-middle">平台联系方式</h3>
                    <Row>
                        <Col span={11} offset={1}>
                            姓名:{record.name?record.name:' --'}
                        </Col>
                        <Col span={11} offset={1}>
                            手机号码:{record.phone?record.phone:' --'}
                        </Col>
                    </Row>
                    <Row>
                        <Col span={23} offset={1}>
                            公司名称:{record.company?record.company:' --'}
                        </Col>
                    </Row>
                    <h3 className="my-apply-title-middle">数据情况</h3>
                    <div >
                        <Row>
                            <Col span={10} offset={1} style={{color:'#aaa',marginTop:'10px'}}>近五天投放情况</Col>
                        </Row>
                        <Row>
                            <Col span={4} offset={1}>消费：</Col>
                            <Col span={3} >￥{ModalAllDataUpdates[0].consumptionmoney?ModalAllDataUpdates[0].consumptionmoney:0}</Col>
                            <Col span={4} >{convertCurrency(ModalAllDataUpdates[0].consumptionmoney?ModalAllDataUpdates[0].consumptionmoney:0)}</Col>
                            <Col span={4}>总进线：</Col>
                            <Col span={4}>{ModalAllDataUpdates[0].coillnsum?ModalAllDataUpdates[0].coillnsum:0}</Col>
                        </Row>
                        <Row>
                            <Col span={4} offset={1}>平均进线成本：</Col>
                            <Col span={3} >￥{ModalAllDataUpdates[0].averagelinecost?ModalAllDataUpdates[0].averagelinecost:0}</Col>
                            <Col span={4} >{convertCurrency(ModalAllDataUpdates[0].averagelinecost?ModalAllDataUpdates[0].averagelinecost:0)}</Col>
                            <Col span={4}>产出比：</Col>
                            <Col span={4}>{ModalAllDataUpdates[0].outputratio?ModalAllDataUpdates[0].outputratio:0}</Col>
                        </Row>
                        <Row>
                            <Col span={10} offset={1} style={{color:'#aaa',marginTop:'10px'}}>历史数据</Col>
                        </Row>
                        <Row>
                            <Col span={4} offset={1}>消费：</Col>
                            <Col span={3} >￥{ModalAllDataUpdates[1].consumptionmoney?ModalAllDataUpdates[1].consumptionmoney:0}</Col>
                            <Col span={4} >{convertCurrency(ModalAllDataUpdates[1].consumptionmoney?ModalAllDataUpdates[1].consumptionmoney:0)}</Col>
                            <Col span={4}>总进线：</Col>
                            <Col span={4}>{ModalAllDataUpdates[1].coillnsum?ModalAllDataUpdates[1].coillnsum:0}</Col>
                        </Row>
                        <Row>
                            <Col span={4} offset={1}>平均进线成本：</Col>
                            <Col span={3} >￥{ModalAllDataUpdates[1].averagelinecost?ModalAllDataUpdates[1].averagelinecost:0}</Col>
                            <Col span={4} >{convertCurrency(ModalAllDataUpdates[1].averagelinecost?ModalAllDataUpdates[1].averagelinecost:0)}</Col>
                            <Col span={4}>产出比：</Col>
                            <Col span={4}>{ModalAllDataUpdates[1].outputratio?ModalAllDataUpdates[1].outputratio:0}</Col>
                        </Row>
                    </div>
                    <h3 className="my-apply-title-middle">申请事宜（平台概述及销售主管投放建议）</h3>
                    <Row>
                        <Col span={22} offset={1} className="little-tool-textarea" style={{background:'#ddd',padding:'5px',borderRadius:'5px'}}>
                            {record.affairs}
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8} offset={1}>
                            收款账户名：{record.inforname}
                        </Col>
                        <Col span={8} >
                            付款方式：{record.paymethod==0?'银行卡':'支付宝'}
                        </Col>

                    </Row>
                    <Row>
                        <Col span={8} offset={1}>
                            开户行:{record.openingbank}
                        </Col>
                        <Col span={7} >
                            支行:{record.subbranch}
                        </Col>
                        <Col span={8} >
                            银行卡号：{record.account}
                        </Col>
                    </Row>
                    <Row>
                        <Col span={23} offset={1}>
                            付款项目：{record.payproject}
                        </Col>
                    </Row>
                    <Row style={{marginTop:'10px'}}>
                        <Col span={8} offset={1}>
                            付款金额：{record.paymoney}
                        </Col>
                        <Col span={7} >
                            申请人：{record.requestpeople}
                        </Col>
                        <Col  span={8} >
                            要求付款时间: {record.paytime}
                        </Col>
                    </Row>
                    <Row>
                        <Col span={23} offset={1}>
                            <p>填单拍照：</p>
                            {
                            record.imgURL?(JSON.parse(record.imgURL)).length ? (JSON.parse(record.imgURL)).map((item,i)=>{
                                return <a href={config.Filepath + item} target="_blank" key={i} style={{marginRight:'20px'}}>
                                        <img src={config.Filepath +item} style={{ height: "100px", width: "200px" }} />
                                    </a>
                            }):'未上传图片':''
                        }
                        </Col>
                    </Row>
                    <div style={{textAlign:'center'}}>
                        <Button onClick={this.handlePayApplyFaied.bind(this)}>驳回</Button>
                        <Button style={{marginLeft:'10px'}}  onClick={this.handlePayApplyPass.bind(this)}>通过</Button>
                    </div>
                </Modal>
            </div>
        )
    }
}